<template>
	<base-container :content-style="{'background-color': '#f7f7f7'}">
		<template>
			<!-- <view class="head">
				<image class="bg" src="/static/sylx.png" mode="aspectFit" />
				<image class="title" src="/static/icon.png" mode="aspectFit" />
				<view class="title-content">{{ form.status }}</view>
			</view> -->
		</template>
		<view>
			<view class="head">
				<image class="bg" src="/static/sylx.png" mode="aspectFit" />
				<image class="title" src="/static/icon.png" mode="aspectFit" />
				<view class="title-content">{{ form.status }}</view>
			</view>
			<base-card :title="form.planOrderNo">
				<view class="item-info">
					<text class="label">组名</text>
					<text class="value">{{ form.lineGroup }}</text>
				</view>
				<view class="item-info">
					<text class="label">线路名称</text>
					<text class="value">{{ form.lineName }}</text>
				</view>
				<view class="item-info">
					<text class="label">片区</text>
					<text class="value">{{ form.administrativeRegion }}</text>
				</view>
				<view class="item-info">
					<text class="label">处置单位</text>
					<text class="value">{{ form.disposalUnit }}</text>
				</view>
				<view class="item-info">
					<text class="label">公里数</text>
					<text class="value">{{ form.mileage }}</text>
				</view>
			</base-card>
			<base-card>
				<view class="item-info">
					<text class="label">调度时间</text>
					<text class="value">{{ form.dispatchTime }}</text>
				</view>
				<view class="item-info">
					<text class="label">执行日期</text>
					<text class="value">{{ form.executeDate }}</text>
				</view>
				<view class="item-info">
					<uni-tag v-for="tag in getRepTags(form.vehiclePlates)" :key="tag" :text="tag"
						custom-style="background-color:#e6eeff; border-color: #e6eeff; color: #1763FC;margin-right:10rpx"
						type="primary" />
				</view>
				<view class="item-info">
					<text class="label">驾驶员</text>
					<text class="value">{{ form.drivers }}</text>
				</view>
				<view class="item-info">
					<text class="label">装卸员</text>
					<text class="value">{{ form.loUnPersonals }}</text>
				</view>
				<!-- <view class="item-info">
					<base-swiper-item :list="form.medicalInstitutionTypeGroups">
						<template #default="{ item:val = { key: '', value: '' } }">
							<view class="jgdw" @click.stop="toBasePath('/plannedRoute/index?id=' + form.id)">
								<view>{{ val.key }}类机构</view>
								<view style="color: #1763FC">{{ val.value }}</view>
							</view>
						</template>
					</base-swiper-item>
				</view> -->
				<view v-if="form.status.includes('执行中')">
					<text class="label">出车时间</text>
					<text class="value">{{ form.departureTime }}</text>
				</view>
			</base-card>
			<!-- <base-card v-if="form.returnFactoryArray && (form.returnFactoryArray.length > 0)" title="回厂信息">
				<template v-for="(item,index) in form.returnFactoryArray" :key="item.id">
					<view class="custom-card">
						<uni-card :extra="(index+1) < 10 ? `0${index+1}`:(index+1)" :title="item.vehiclePlate"
							margin="5rpx" padding="0">
							<view class="item-info">
								<text class="label">回厂时间</text>
								<text class="value">{{ item.returnTime }}</text>
							</view>
							<view class="item-info">
								<text class="label">地磅重量</text>
								<text class="value">{{ item.weighbridge }}kg</text>
							</view>
							<view class="item-info">
								<text class="label">图片</text>
								<base-images v-model="item.returnImgs" :disabled="true" />
								<view v-if="!item.returnImgs" style="height: 120rpx;width: 120rpx"></view>
							</view>
						</uni-card>
					</view>
				</template>
			</base-card> -->
			<view class="hcxxBox" v-if="form.returnFactoryArray && (form.returnFactoryArray.length > 0)">
				<view class="tit">回厂信息</view>
				<view class="hcxxbox" v-for="(item,index) in form.returnFactoryArray" :key="item.id">
					<view class="cp">{{ item.vehiclePlate }}</view>
					<view class="cell flex-ac">
						<view class="hd">回厂时间</view>
						<view class="bd">{{ item.returnTime }}</view>
					</view>
					<view class="cell flex-ac">
						<view class="hd">地磅净重</view>
						<view class="bd">{{ item.weighbridge }}kg</view>
					</view>
					<view class="cell">
						<view class="hd" style="margin-bottom: 20rpx;">图片</view>
						<base-images v-model="item.returnImgs" :disabled="true" />
					</view>
				</view>
			</view>

      <!-- 当日任务完成 -->
      <base-card title="当日任务完成" v-if="['待审核','已审核','已统计'].includes(form.status)">
        <view style="display: flex">
          <view style="flex: 1">
            <view class="item-info">
              <text class="label">行驶公里数</text>
              <text class="value">{{ form.drivenMileage }}km</text>
            </view>
          </view>
          <view style="flex: 1; text-align: right">
            <view class="item-info">
              <text class="label">实收点数</text>
              <text class="value">{{ form.actualReceivedPoints }}</text>
            </view>
          </view>
        </view>
        <view style="display: flex">
          <view style="flex: 1">
            <view class="item-info">
              <text class="label">联单重量</text>
              <text class="value">{{ form.orderWeight }}kg</text>
            </view>
          </view>
          <view style="flex: 1; text-align: right">
            <view class="item-info">
              <text class="label">加油升数</text>
              <text class="value">{{ form.refuelingLiters }}</text>
            </view>
          </view>
        </view>
        <view class="item-info">
          <view class="label" style="margin-bottom: 20rpx;">加油照片</view>
          <base-images v-model="form.refuelingImages" :disabled="true" />
          <view v-if="!form.refuelingImages" style="height: 120rpx;width: 120rpx"></view>
        </view>
      </base-card>

      <!-- 工资列表 -->
      <view class="hcxxBox" v-if="['已统计'].includes(form.status)">
        <view class="tit" style="display: flex;">
          <view style="font-size: 34rpx;color: #3a3a3a;font-weight: 700;">
            工资列表
          </view>
          <view style="flex: 1; text-align: right">
            <text>{{ (form.executeDate||"").substring(5) }}</text>
          </view>
        </view>
        <view v-for="(item,index) in wagesDataSource" :key="item.id" style="padding-bottom: 30rpx;  border-top: 1rpx solid #E5E5E5;">
          <view class="cp">
			  <view class="index flexmid">{{"0" + (index + 1)}}</view>
            <view class="flex-ac">
				<view class="name">{{ item.personName }}</view>
				<view class="job">{{ item.job }}</view>
				<view class="label flexmid">{{ item.post == 'driver' ? '驾驶员':'收运员' }}</view>
			</view>
            <view class="gsName">{{ item.disposalUnit }}</view>
          </view>
          <view style="display: flex; margin-top: 20rpx;">
            <view style="flex: 3">
              <view style="display: flex; margin-bottom: 10rpx" class="cp-item flex-ac">
                <view style="flex: 1" class="flex-ac">
					<image src="../../../static/tasks/zhong.png" style="width: 70rpx; height: 70rpx;" mode=""></image>
				</view>
                <view style="flex: 3">
                  <view style="font-size: 26rpx; color: #333; font-weight: bold;">重量金额(元)</view>
                  <view style="font-size: 26rpx; color: #666; margin-top: 6rpx;">{{ item.weight||0 }}kg|{{ item.weightPrice||0 }}元/kg</view>
                </view>
                <view style="flex: 1;text-align: right; color: #333; font-size: 34rpx; font-weight: bold;">
                  {{ item.weightSubtotal||0 }}
                </view>
              </view>
              <view style="display: flex; margin-bottom: 10rpx" class="cp-item flex-ac">
                <view style="flex: 1" class="flex-ac">
					<image src="../../../static/tasks/dian.png" style="width: 70rpx; height: 70rpx;" mode=""></image>
				</view>
                <view style="flex: 3">
                  <view style="font-size: 26rpx; color: #333; font-weight: bold;">点位金额(元)</view>
                  <view style="font-size: 26rpx; color: #666; margin-top: 6rpx;">{{ item.point||0 }}点|{{ item.pointSubsidy||0 }}元/点(补贴)</view>
                </view>
                <view style="flex: 1; text-align: right; color: #333; font-size: 34rpx; font-weight: bold;">
                  {{item.pointSubtotal||0}}
                </view>
              </view>
              <view style="display: flex;  margin-bottom: 10rpx" class="cp-item flex-ac">
                <view style="flex: 1" class="flex-ac">
					<image src="../../../static/tasks/li.png" style="width: 70rpx; height: 70rpx;" mode=""></image>
				</view>
                <view style="flex: 3">
                  <view style="font-size: 26rpx; color: #333; font-weight: bold;">里程金额(元)</view>
                  <view style="font-size: 26rpx; color: #666; margin-top: 6rpx;">{{ item.mileage||0 }}km|{{ item.mileageAllowance||0 }}元/km(补贴)</view>
                  <view style="font-size: 26rpx; color: #666; margin-top: 6rpx;">{{ item.mileageExceedAllowance||0 }}元(超长里程补贴)</view>
                </view>
                <view style="flex: 1; text-align: right; color: #333; font-size: 34rpx; font-weight: bold;">
                  {{ item.mileageSubtotal||0 }}
                </view>
              </view>
            </view>
            <view style="flex: 1; background-color: #f7f7f7; border-radius: 20rpx; margin-left: 10rpx;" class="flexmid-col">
              <view style="font-size: 40rpx; font-weight: bold; color: #333;">{{ item.totalAmount || 0 }}</view>
              <view style="font-size: 26rpx; font-weight: bold; color: #333;">合计(元)</view>
            </view>
          </view>
        </view>
      </view>

			<uni-card :is-full="true" title="计划单日志" :isShadow="false" :border='false'>
				<!-- <uni-grid :column="3" :showBorder="false" :square="false" class="base-card-logs">
					<uni-grid-item style="text-align: center; background-color:#f7f7f7;">
						<text class="text">时间</text>
					</uni-grid-item>
					<uni-grid-item style="text-align: center; background-color:#f7f7f7;">
						<text class="text">操作</text>
					</uni-grid-item>
					<uni-grid-item style="text-align: center; background-color:#f7f7f7;">
						<text class="text">操作人</text>
					</uni-grid-item>
					<template v-for="(val,index) in form.taskPlanLogArray" :key="index">
						<uni-grid-item style="text-align: center; font-size: 24rpx">
							<text class="text">{{ val.logTime }}</text>
						</uni-grid-item>
						<uni-grid-item style="text-align: center; font-size: 24rpx">
							<text class="text">{{ val.operateContent }}</text>
						</uni-grid-item>
						<uni-grid-item style="text-align: center; font-size: 24rpx">
							<text class="text">{{ val.operateUser }}</text>
						</uni-grid-item>
					</template>
				</uni-grid> -->
				<view class="logNav flex-ac">
					<view class="logNavItem1">时间</view>
					<view class="logNavItem2">操作</view>
					<view class="logNavItem2">操作人</view>
				</view>
				<view class="logNav flex-ac form" v-for="(val,index) in form.taskPlanLogArray" >
					<view class="logNavItem1">{{ val.logTime.split(':')[0] + ':' + val.logTime.split(':')[1] }}</view>
					<view class="logNavItem2">{{ val.operateContent }}</view>
					<view class="logNavItem2">{{ val.operateUser }}</view>
				</view>
			</uni-card>
			<view style="padding: 15rpx 0; padding-bottom:40rpx;">
				<task-btns :item="form" @done="() => this.loadDate(this.params)" />
			</view>
		</view>
	</base-container>
</template>

<script>
	import {
		TaskPlanApi as Api
	} from "@/comms/api/taskPlanApi";
	import {
		Msg,
		toBack,
		toPath
	} from "@/utils/BaseUtils";
	import TaskBtns from "@/pages/task/task-btns.vue";

	export default {
		components: {
			TaskBtns
		},
		data() {
			return {
				params: {},
				form: {},
        wagesDataSource: [], // 工资列表
				imag: {
					audit: '/static/my/jz.png',
					agree: '/static/my/ytg.png',
					reject: '/static/my/jz.png'
				},
				tabs: [{
						key: 'audit',
						name: '待审核',
					},
					{
						key: 'agree',
						name: '已通过'
					},
					{
						key: 'reject',
						name: '已拒绝'
					}
				]
			};
		},
		onLoad(params) {
			this.params = params;
			console.log("params", params)
			uni.setNavigationBarTitle({
				title: "计划单详情"
			});
		},
		mounted() {
			this.loadDate(this.params)

      uni.$on("tasksJhdxqJhdxq", () => {
        this.loadDate(this.params)
      })
		},
		methods: {
			toPath,
			async loadDate({
				id
			}) {
				Msg.loading(async close => {
					if (id) {
						await Api.detail({
							id
						}).then(({
							data
						}) => {
              this.form = {...data}
              this.wagesDataSource = [...(data.driverArray||[]), ...(data.loUnPersonnelArray||[])];
              // 现在接口还没有返回数据 这里给刘老师调试样式的数据， 调试完成后请把这个数据删除了
              // this.wagesDataSource = [
              //   {
              //     personName: '张三',
              //     job: '副总',
              //     post: 'driver',
              //     disposalUnit: '重庆市医废处理收运厂',
              //     weight: '20',
              //     weightPrice: '2.2',
              //     weightSubtotal: '40.4',
              //     point: '3',
              //     pointSubsidy: '3',
              //     pointSubtotal: '9',
              //     mileage: '3',
              //     mileageAllowance: '5',
              //     mileageExceedAllowance: '10',
              //     mileageSubtotal: '25',
              //     totalAmount: '74.4',
              //   },
              //   {
              //     personName: '张三',
              //     job: '一部业务员',
              //     post: 'loUnPersonnel',
              //     disposalUnit: '重庆市医废处理收运厂',
              //     weight: '20',
              //     weightPrice: '2.2',
              //     weightSubtotal: '40.4',
              //     point: '3',
              //     pointSubsidy: '3',
              //     pointSubtotal: '9',
              //     mileage: '3',
              //     mileageAllowance: '5',
              //     mileageExceedAllowance: '10',
              //     mileageSubtotal: '25',
              //     totalAmount: '74.4',
              //   }
              // ]
            })
					}
					close?.();
				})
			},
			remove({
				id
			}) {
				Msg.confirm("确定删除该手工记账信息?")
					.then(() => {
						Api.delete({
							id
						}).then(res => {
							Msg.success("删除成功")
							toBack?.()
						})
					})
			},
			toBasePath(path) {
				toPath("/pages/tasks" + path)
			},
			getRepTags(tags) {
				return (tags || "").split(",")
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "jhdxq.scss";
</style>

<style lang="scss" scoped>
	.head {
		width: 100%;
		height: 200rpx;
		position: relative;

		.bg {
			width: 100%;
			height: 100%;
			align-items: center;
			font-size: 34rpx;
			text-align: left;
			color: #ffffff;
			box-sizing: border-box;
		}

		.title {
			position: absolute;
			width: 100rpx;
			height: 100rpx;
			left: 35rpx;
			top: 50%;
			transform: translateY(-50%);
		}

		.title-content {
			position: absolute;
			left: 160rpx;
			top: 50%;
			transform: translateY(-50%);
			font-size: 34rpx;
			color: white;
		}

	}

	.base-card-logs {

		view {
			padding: 5rpx 0;
		}

	}


	.custom-card {
		position: relative;
		width: 100%;
		// height: auto;
		margin-bottom: 20rpx !important;

		::v-deep(.uni-card__header-extra-text) {
			background-color: #E6EEFF !important;
			padding: 20rpx;
			font-size: 30rpx !important;
			color: #1763FC !important;
			border-radius: 10rpx;
			position: absolute;
			right: -35rpx;
			top: 0;
		}

		::v-deep(.uni-card) {
			background-color: #F7F7F7;
		}

		view {
			margin-bottom: 10rpx !important;
		}
	}

	.button-group {
		button {
			margin-left: 10rpx;
		}
	}

	:deep(.uni-dialog-button-text) {
		color: #1763fc
	}

	:deep(.uni-forms) {
		width: 100% !important;
	}

	:deep(.uni-forms-item__content) {
		border: 2rpx solid #e6e6e6;
		border-radius: 10rpx;
		padding: 12rpx 20rpx;
	}

	:deep(.uni-forms-item:nth-child(4) .uni-forms-item__content) {
		border: none;
		border-radius: 10rpx;
		padding: 12rpx 20rpx;
	}

	:deep(.uni-forms-item--border) {
		border: none;
		padding: 0rpx;
	}

	:deep(.uni-card__header-content-title) {
		font-size: 28rpx;
	}

	:deep(.z-tabs-item) {
		padding: 0 0 36rpx;
		position: relative;
	}

	.cancel {
		font-size: 34rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: Regular;
		text-align: left;
		color: #999999;
		line-height: 48rpx;
		position: absolute;
		top: 32rpx;
		left: 40rpx;
	}

	:deep(.uni-border-left) {
		background: #1763fc;
	}

	:deep(.uni-dialog-title) {
		padding-top: 32rpx;
	}

	.def-btn,
	.main-btn {
		padding: 14rpx 26rpx !important;
		margin: 0;
		flex: 1;
		font-size: 28rpx;
		text-align: center;
	}

	:deep(.paging-top-bg) {
		height: 280rpx !important;
		background-repeat: no-repeat;

	}

	:deep(.z-tabs-conatiner) {
		margin-top: 36rpx;
	}

	:deep(.uni-grid-item) {}

	:deep(.uni-dialog-button) {
		border: 2rpx solid #1763fc;
		border-radius: 10rpx;
		margin: 0 30rpx 30rpx;

		.uni-button-color {
			font-size: 28rpx !important;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: Regular;
			text-align: center;
			color: #1763fc !important;
		}
	}

	:deep(.uni-border-left) {
		.uni-button-color {
			font-size: 30rpx !important;
			;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: Regular;
			text-align: center !important;
			;
			color: #ffffff !important;
		}
	}

	:deep(.uni-card__header) {
		padding-bottom: 0rpx !important;
	}

	:deep(.uni-card__content) {
		line-height: 36rpx;
	}

	:deep(.uni-grid-wrap, .uni-grid) {
		height: 100% !important;
	}

	:deep(.grid-item-box) {
		width: 176rpx !important;
	}

	:deep(.uni-grid-wrap) {
		.grid-item:before {
			content: '';
			display: block;
			width: 2rpx;
			height: 40rpx;
			background: #b6b6b6;
			position: absolute;
			top: 40rpx;
		}

		.grid-item:nth-child(1):before {
			content: '';
			display: block;
			width: 2rpx;
			height: 40rpx;
			background: transparent;
			position: absolute;
			top: 50rpx;
		}
	}

	.jgdw {
		view:nth-child(1) {
			margin-bottom: 0rpx;
			padding-top: 10rpx !important;
		}

	}

	:deep(.uni-grid-item) {
		height: 120rpx !important;
	}

	.jgdw:nth-child(2n) {
		background: red;
	}

	.item-info {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.label {
		font-size: 30rpx;
		color: #999999;
		margin-right: 20rpx;
		width: 150rpx;
	}

	.value{
		font-size: 30rpx;
		color: #333333 !important;
	}

	.uni-card--border {
		border: none !important;
	}
</style>
